<template>
    <div class="spage">
        <topnav pageindex="3" pagename="proppage"></topnav>
        <div class="contentwrap">
            <div class="prop-words animate box">
                <span>显卡挖白币的时代，即将到来!</span>
            </div>
            <div class="prop-pic">
                <img src="../assets/imgs/xwclogo.png" id="xwcpic">
            </div>
        </div>
        <footemp></footemp>
    </div>
</template>
<script>
    import topnav from '@/components/common/topnav.vue';
    import footemp from "@/components/common/footer.vue";
    export default {
        name: 'propPage',
        data() {
            return {}
        },
        components: {
            topnav,
            footemp
        },
        mounted() {
            $('body').addClass('black-bg');
        },
        beforeRouteLeave: (to, from, next) => {
            $('body').removeClass('black-bg');
            next();
        }
    }
</script>
<style scoped>
.animate {
  font-size: 40px;
  margin: 100px 0 0;
}

.animate span {
  display: inline-block;
}

.box span {
  color: #fff;
  opacity: 0;
  transform: translate(-150px, 0) scale(.5);
  animation: leftRight 1s forwards;
}

@keyframes leftRight {
  40% {
    transform: translate(30px, 0) scale(.7);
    opacity: 1;
    color: #000;
  }
  60% {
    color: #fff;
  }
  80% {
    transform: translate(0) scale(2);
    opacity: 0;
  }
  100% {
    transform: translate(0) scale(1);
    opacity: 1;
  }
}
.prop-pic {
    width: 244px;
    margin: 50px auto;
}
.prop-pic img {
    display: block;
}
</style>